<template>
  <section class="Navs">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" key="" @select="handleSelect">
      <el-menu-item index="0" class="el-menu-title">文件列表</el-menu-item>
      <el-menu-item index="1" class="el-menu-title">文件分类</el-menu-item>
    </el-menu>
    <div class="box-connot">
      <keep-alive>
        <router-view/>
      </keep-alive>
    </div>
  </section>
</template>
<script>
export default {
  name: 'tabNavs',
  data () {
    return {
      activeIndex: '0',
      keyIndex: null
    }
  },
  created () {
    this.routerArr = ['document', 'documentClass']
    const url = location.href
    this.routerArr.forEach((item, index) => {
      if (url.includes(item)) this.activeIndex = index + ''
    })
  },
  methods: {
    handleSelect (key) {
      this.$router.push({name: this.routerArr[key]})
      this.keyIndex = key
    }
  },
  watch: {
    $route () {
      const url = location.href
      this.routerArr.forEach((item, index) => {
        if (url.includes(item)) this.activeIndex = index + ''
      })
    }
  },
  activated () {
    this.$router.push({name: this.routerArr[this.keyIndex]})
  }
}
</script>
<style lang="less">
  .Navs {
  .el-menu-demo{background:#ffffff;}
  .el-menu-title{font-size: 16px;}
  .box-connot{margin: 0;}
  }
</style>
